<template>
	<view class="container">
		<image class="bg" :src="data.value?data.value.coverImgUrl:''" />
		<view class="shader"></view>
		<view style="height: 100vh;">
			<view class="info">
				<view class="songListPic">
					<image :src="data.value?data.value.coverImgUrl:''" />
					<text>▷
						{{data.value?data.value.playCount>100000000?(data.value.playCount/100000000).toFixed(2)+'亿':data.value.playCount>10000?(data.value.playCount/10000).toFixed(2)+'万':data.value.playCount:''}}次</text>
				</view>
				<view class="detail">
					<text class="title">{{data.value?data.value.name:''}}</text>
					<view class="temp">
						<image :src="data.value?data.value.creator.avatarUrl:''" style="border-radius: 50%;" />
						<text
							style="margin-left: 2vw;font-size: 0.85em;">{{data.value?data.value.creator.nickname:''}}</text>
					</view>
					<text class="desc">
						{{data.value?data.value.description:''}}
					</text>
				</view>
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<view style="display: flex;justify-content: center;">
				<button
					style="color:#fff;background: rgba(0,0,0,0.1);border-radius: 100vw;font-size: 28rpx;">分享给微信好友</button>
			</view>
			<!-- #endif -->
			<view class="songList">
				<view class="playAll" @click="playAll">
					<image style="width: 5vw;height: 5vw;margin-right: 2vw;" src="@/static/play.png" />
					<text>播放全部</text>
					<text
						style="color: #aaaaaa;border: none;outline: none;">(共{{data.value?data.value.tracks.length:''}}首)</text>
				</view>
				<songItem v-for="(song,index) in data.value?data.value.tracks:[]" :key="song.id" :info="song">
				</songItem>
			</view>
		</view>
	</view>
</template>

<script setup>
	import baseUrl from '@/config.js'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		reactive
	} from "vue";
	
	let id = 0
	let data = reactive({})
	
	onLoad((option) => {
		id = option.id
		uni.request({
			url: baseUrl + `/playlist/detail?id=${id}`,
			success(res) {
				data.value = res.data.playlist
				// console.log(res)
				// console.log(data.value)
			}
		})
	})
	
	function playAll(){
		let list = []
		data.value.tracks.forEach((item)=>{
			let artistStr = ""
			let a = item.ar
			let l = a.length
			if (l > 1) {
				for (let i = 0; i < l; i++) {
					artistStr = i == l - 1 ? artistStr + a[i].name : artistStr + a[i].name + ","
				}
			} else artistStr = item.ar[0].name
			list.push({id:item.id,name:item.name,artist:artistStr})
		})
		getApp().globalData.playList = list
		getApp().globalData.currentPlayIndex = 0
		uni.navigateTo({
			url:'/pages/playMusic/playMusic'
		})
	}
</script>

<style lang="less" scoped>
	.container {
		width: 100vw;
		height: 100vh;
		display: flex;
	}

	.bg {
		position: absolute;
		width: 100%;
		height: 50%;
		z-index: -2;
	}

	.shader {
		position: absolute;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.1);
		backdrop-filter: blur(50px);
		z-index: -1;
	}

	.info {
		display: flex;
		padding: 10vw 10vw 5vw 10vw;

		.songListPic {
			width: 30vw;
			height: 30vw;

			image {
				position: absolute;
				width: 30vw;
				height: 30vw;
				border-radius: 1vw;
				z-index: -1;
			}

			text {
				color: #eeeeee;
				float: right;
				padding: 1vw;
				font-size: 0.8em;
				background: rgba(0, 0, 0, 0.1);
				border-radius: 0 1vw 0 0;
			}
		}

		.detail {
			padding: 0 10vw;
			width: 40vw;

			image {
				width: 8vw;
				height: 8vw;
			}

			text {
				color: #eeeeee;
			}

			.temp {
				display: flex;
				align-items: center;
				line-height: 7vh;
			}

			.title {
				font-size: 1.2em;
			}

			.desc {
				font-size: 0.7em;
				display: -webkit-box;
				-webkit-line-clamp: 3;
				word-break: break-all;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.desc::after {
				content: '>';
			}
		}
	}

	.songList {
		position: absolute;
		background: #fff;
		border-radius: 8vw 8vw 0 0;
		width: 100vw;
		margin-top: 3vh;
		box-sizing: border-box;
		padding: 5vw;

		.playAll {
			display: flex;
			align-items: center;
		}
	}
</style>
